<template>
	<Container>
		<view class="integral-index">
			<view class="bg"></view>
			<view class="integral-main">
				<view class="header">
					<view class="num">{{integral}}</view>
					<view class="integral_rule">积分规则 > </view>
				</view>
				<view class="sign-in-days">
					<view class="days">
						<template v-for="(day, index) in days"  :key="index">
							<view class="day" :class="{'current': day.signin}">
								<view class="gou" v-if="day.signin"><image class="gou" src="/static/gou_1.svg"></image></view>
								<view class="dot" v-else>+{{day.integral}}</view>
								<view class="lab" :class="{'cur': false}">{{getDayName(day.name)}}</view>
							</view>
						</template>
					</view>
					<view class="btn" :class="{'disabled':curSignIn }" @click="signIn">{{curSignIn ? '明日' : '今日'}}签到领+{{nextIntegral}}积分</view>
				</view>
				<view class="module">
					<view class="title">新手任务</view>
					<view class="tasks">
						<view class="task">
							<image src="/static/complete.svg" mode=""></image>
							<view class="content">
								<view class="name">完善信息</view>
								<view class="num">+10积分</view>
							</view>
							<view class="btn">去完善</view>
						</view>
					</view>
				</view>
				<view class="module">
					<view class="title">每任务</view>
					<view class="tasks">
						<view class="task">
							<image src="/static/complete.svg" mode=""></image>
							<view class="content">
								<view class="name">记账</view>
								<view class="num">+1积分</view>
							</view>
							<view class="btn">去记账</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</Container>
</template>

<script>
	export default {
		data() {
			return {
				integral: 3, // 我的积分
				curSignIn: false, // 今日是否签到
				nextIntegral: 0, // 下一次的签到积分， 当前没有签到就是今日的积分， 今日已签到，则是明日的积分
				days: [
					{name: '2.23', signin: true, integral: 1},
					{name: '2.24', signin: false, integral: 2},
					{name: '2.25', signin: false, integral: 3},
					{name: '2.26', signin: false, integral: 4},
					{name: '2.27', signin: false, integral: 5},
					{name: '2.28', signin: false, integral: 6},
					{name: '2.29', signin: false, integral: 7},
				], // 一周时间
			};
		},
		onLoad () {
			this.getDays()
			this.getCurNextIntegral()
		},
		methods: {
			/** 将日期转为 昨天，今天，明天 **/
			getDayName (day) {
				let _day = day.replace(/\./g, '-')
				let date = new Date()
				let curYear = date.getFullYear()
				let curMonth = date.getMonth() + 1
				let curDay = date.getDate()
				let curDate = curMonth+'-'+curDay
				/** 判断是否是昨天 **/
				let dayTime = new Date(curYear+'-'+_day).getTime()
				let curTime = new Date(curYear+'-'+curDate).getTime()
				let diffTime = curTime - dayTime
				if(diffTime === 0) {
					return '今天'
				} else if(diffTime < 0 && diffTime === -86400000) {
					return '明天'
				} else if (diffTime > 0 && diffTime === 86400000) {
					return '昨天'
				} else {
					return day
				}
			},
			/** 获取日期列表 **/
			getDays () {
				// this.days=[]
			},
			/** 获取按钮上的积分数值 **/
			getCurNextIntegral () {
				this.days.map(i=>{
					if(!i.signin && !this.nextIntegral) {
						this.nextIntegral  = i.integral
					}
				})
			},
			signIn () {
				if(this.curSignIn) return 
				this.curSignIn = true
				const index = this.days.findIndex(i=>!i.signin)
				this.days[index].signin = true
				this.nextIntegral = index === this.days.length - 1 ? this.days[index].integral + 1 : this.days[index + 1].integral
				this.integral += this.days[index].integral
			}
		}
	}
</script>

<style lang="scss">
.integral-index {
	position: relative;
	.bg {
		position: absolute;
		height: 300rpx;
		background-color: #2C405A;
		top: 0;
		left: 0;
		right: 0;
	}
	.integral-main {
		padding: 32rpx;
		.header {
			position: relative;
			z-index: 10;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 50rpx;
			.num {
				color: #fff;
				font-size: 50rpx;
			}
			.integral_rule {
				color: #fff;
				font-size: 24rpx;
				opacity: .8;
			}
		}
		.sign-in-days {
			margin-top: 46rpx;
			box-shadow: 0 10rpx 40rpx -10rpx rgba(0, 64, 128, .2);
			border-radius: 16rpx;
			position: relative;
			background-color: #fff;
			padding: 32rpx;
			
			.days {
				display: flex;
				align-items: center;
				.day {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					position: relative;
					&.current {
						&::after {
							content: '';
							position: absolute;
							top: 22rpx;
							bottom: 0;
							right: 0;
							left: calc(50% + 24rpx);
							height: 10rpx;
							background-color: #2C405A;
						}
						&::before {
							content: '';
							position: absolute;
							top: 22rpx;
							bottom: 0;
							right: calc(50% + 24rpx);
							left: -1px;
							height: 10rpx;
							background-color: #2C405A;
						}
						&+.day {
							&::before {
								content: '';
								position: absolute;
								top: 22rpx;
								bottom: 0;
								right: calc(50% + 24rpx);
								left: 0;
								height: 10rpx;
								background-color: #2C405A;
							}
						}
					}
					
					&::after {
						content: '';
						position: absolute;
						top: 22rpx;
						bottom: 0;
						right: 0;
						left: calc(50% + 24rpx);
						height: 10rpx;
						background-color: #eee;
					}
					&::before {
						content: '';
						position: absolute;
						top: 22rpx;
						bottom: 0;
						right: calc(50% + 24rpx);
						left: 0;
						height: 10rpx;
						background-color: #eee;
					}
					&:nth-child(1) {
						&::before {
							display: none;
						}
					}
					&:last-child {
						&::after {
							display: none;
						}
					}
					.gou {
						width: 50rpx;
						height: 50rpx;
						border-radius: 100%;
						background-color: #2C405A;
						display: flex;
						justify-content: center;
						align-items: center;
						
						image {
							width: 30rpx;
							height: 30rpx;
							
						}
					}
					
					.dot {
						width: 50rpx;
						height: 50rpx;
						border-radius: 100%;
						background-color: #eee;
						font-size: 26rpx;
						color: #888;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					
					.lab {
						color: #888;
						font-size: 26rpx;
						margin-top: 10rpx;
					}
					.cur {
						color: #333;
					}
				}
			}
			
			.btn {
				width: 500rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #2C405A;
				color: #fff;
				border-radius: 40rpx;
				margin:  32rpx auto 0;
				
			}
			.disabled {
				opacity: 0.5;
			}
		}
		
		.module {
			padding: 24rpx 32rpx;
			box-shadow: 0 10rpx 40rpx -10rpx rgba(0, 64, 128, .2);
			border-radius: 16rpx;
			background-color: #fff;
			margin-top: 24rpx;
			.title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
				position: relative;
				&:before {
					position: absolute;
					left: -32rpx;
					top: 0;
					bottom: 0;
					margin: auto;
					content: '';
					display: inline-block;
					width: 6rpx;
					height: 20rpx;
					background-color: #2C405A;
				}
			}
			.tasks {
				padding: 24rpx 0 0;
				.task {
					display: flex;
					align-items: center;
					image {
						width: 60rpx;
						height: 60rpx;
						flex: none;
						margin-right: 20rpx;
					}
					.content {
						flex: 1;
						.name {
							font-size: 30rpx;
							font-weight: 600;
						}
						.num {
							color: #666;
							font-size: 24rpx;
						}
					}
					.btn {
						width: 120rpx;
						height: 50rpx;
						border-radius: 25rpx;
						background-color: #2C405A;
						color: #fff;
						font-size: 26rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						padding:  0 10rpx;
					}
				}
			}
		}
	}
	
}
</style>
